<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/hm.css">
    <script src="./js/flexible.js"></script>
</head>
<body>
    <header>黑马面面</header>
    <!-- 导航 -->
    <nav class="nav">
        <a class="item" href="#">
            <img src="./icons/hr.png" alt="加载失败">
            <span>HR面试</span>
        </a>
        <a class="item" href="#">
            <img src="./icons/电脑(1).png" alt="加载失败">
            <span>技术面试</span>
        </a>
        <a class="item" href="#">
            <img src="./icons/hr.png" alt="加载失败">
            <span>HR面试</span>
        </a>
        <a class="item" href="#">
            <img src="./icons/笔.png" alt="加载失败">
            <span>笔试</span>
        </a>
        <a class="item" href="#">
            <img src="./icons/电脑(1).png" alt="加载失败">
            <span>技术面试</span>
        </a>
        <a class="item" href="#">
            <img src="./icons/笔.png" alt="加载失败">
            <span>笔试</span>
        </a>
        
    </nav>
    <!-- go区域 -->
    <section class="go">
        <a href="#">
            <img src="./images/go.png" alt="">
        </a>      
    </section>
    <!-- 就业指导 -->
    <section class="job">
        <div class="job-hd">
            <h4><span><img src="./icons/i2.png" alt=""></span>就业指导</h4>
            <a href="#">更多</a>
        </div>
        <!-- Swiper -->
        <div class="swiper-container swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"><img src="./images/pic.png" alt=""></a>                
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./images/ldh.jpg" alt=""></a>                
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./images/a9688d3907fcbee.gif" alt=""></a>                
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./images/img-ccbf99438e8aa34f4bf6602a56781e97.jpg" alt=""></a>                
                </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    <!-- 学习指导 -->
    <section class="study">
        <div class="study-hd">
            <h4><span><img src="./icons/i1.png" alt=""></span>充电学习</h4>
            <a href="#">更多</a>
        </div>
        <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#"><img src="./images/pic1.png" alt="">
                    <p>说地道英语，告别中式英语</p>
                    <span class="red">152</span>人在学习
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#"><img src="./images/pic2.png" alt="">
                    <p>说地道英语，告别中式英语</p>
                    <span class="red">152</span>人在学习
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#"><img src="./images/pic1.png" alt="">
                    <p>说地道英语，告别中式英语</p>
                    <span class="red">152</span>人在学习
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#"><img src="./images/pic2.png" alt="">
                    <p>说地道英语，告别中式英语</p>
                    <span class="red">152</span>人在学习
                </a>
              </div>
            </div>
          </div>
    </section>
    <footer>
        <a href="#">
            <img src="./icons/home.png" alt="">
            <p>首页</p>
        </a>
        <a href="#123">
            <img src="./icons/net.png" alt="">
            <p>技术面试</p>
        </a>
        <a href="#">
            <img src="./icons/ms.png" alt="">
            <p>模拟面试</p>
        </a>
        <a href="#">
            <img src="./icons/user.png" alt="">
            <p>我的</p>
        </a>
    </footer>
    <script src="./js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper1 = new Swiper('.swiper-container1', {
            slidesPerView: 2.2,
            spaceBetween: 10,
            centeredSlides: true,            
            loop: true,
            // 管滑动的
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        });
        var swiper2 = new Swiper('.swiper-container2',{
            slidesPerView: 2.2,
            spaceBetween: 20,
        });
    </script>
</body>
</html>